<template>
    <section class="agent-wrapper">
      <el-form :inline="true" :model="searchInfo" class="agent-wrapper_search" @keyup.enter.native="onQuery">
        <el-form-item label="供应商编码">
          <el-input v-model="searchInfo.itemNo" placeholder="请输入供应商编码"></el-input>
        </el-form-item>
        <el-form-item label="供应商名称">
          <el-input v-model="searchInfo.name" placeholder="请输入供应商名称"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onQuery">查询</el-button>
          <el-button @click="onReset">重置</el-button>
        </el-form-item>
      </el-form>
    <el-button v-if="this.$can('VENDOR_ADD')" class="mtb15" type="primary" @click="onCreate">新增供应商</el-button>
     <nb-table
      operatorText
      :tableHeaders="tableHeaders"
      :tableData="tableData"
      :fixedOne="fixedOne"
      :clickData="clickData"
      :clickLast="clickLast"
      :format="format"
      @clickRight="clickRight"
      @clickFirst="onLook"
      :row="row"
      height="auto"
      operatorFixed="left"
    >
    </nb-table>
    <!-- 分页 -->
    <el-pagination
      align="right"
      style="padding-top: 20px;margin-bottom:100px;"
      @size-change="sizeChangeHandle"
      @current-change="currentChangeHandle"
      :current-page="searchInfo.current"
      :page-sizes="[10, 20, 50, 100]"
      :page-size="searchInfo.size"
      :total="total"
      layout="total, sizes, prev, pager, next, jumper"
    ></el-pagination>
</section>
</template>

<script>
import NbTable from '@/components/nb-table.vue'
import {removeEmptyParams} from '@/common/utils'

export default {
  components: {
    NbTable
  },
  data () {
    return {
      total: 0,
      searchInfo: {
        current: 1,
        size: 10
      },
      tableHeaders: [
        {headerKey: 'itemNo', headerName: '供应商编码', click: true},
        {headerKey: 'name', headerName: '供应商'},
        {headerKey: 'address', headerName: '默认提货地址', joint: ['provinceName', 'cityName', 'countyName', 'street']},
        {headerKey: 'contactName', headerName: '联系人'},
        {headerKey: 'contactPhone', headerName: '联系电话'}
      ],
      tableData: [], // table数据
      fixedOne: false,
      clickOne: false,
      clickLast: true,
      categoryList: [],
      row: [],
      format: [{
        need: 'advisorMobile',
        type: 'phone'
      }],
      clickData: [
        {
          btnName: 'VENDOR_EDIT',
          name: '编辑',
          type: 'edit'
        }, {
          btnName: 'VENDOR_DEL',
          name: '删除',
          type: 'delete'
        }]
    }
  },
  mounted () {
    // 获取列表
    this.getProviderList()
  },
  methods: {
    async getProviderList () {
      const temp = removeEmptyParams(this.searchInfo)
      temp.type = 0 // [1]代理商[0]供应商
      let {data} = await this.$http.post(`/${this.$const.PREFIX.MAINDATA}/mvendors/page`, temp)
      this.tableData = data.records
      this.total = data.total
      this.searchInfo.size = data.size
      this.searchInfo.current = data.current
    },
    onQuery () {
      this.searchInfo.itemNo = this.searchInfo.itemNo && this.searchInfo.itemNo.trim()
      this.searchInfo.name = this.searchInfo.name && this.searchInfo.name.trim()
      this.searchInfo.current = 1
      this.getProviderList()
    },
    onReset () {
      this.searchInfo.itemNo = ''
      this.searchInfo.name = ''
      this.getProviderList()
    },
    onCreate () {
      this.changeRoute()
    },
    clickRight (data) {
      switch (data.type) {
        case 'edit':
          this.editItem(data.row.id)
          break
        case 'delete':
          this.deleteItem(data.row)
          break
      }
    },
    delQueryModel () {},
    editItem (id) {
      id && this.changeRoute(id)
    },
    // 查看详情
    onLook (pa) {
      this.$router.push({
        name: 'createProvider',
        params: {
          id: 'look', // 页面类型
          currentId: pa.id || '' // 当前页面ID
        }
      })
    },
    changeRoute (pa) {
      this.$router.push({
        name: 'createProvider',
        params: {
          id: pa || 'new',
          currentId: pa || ''
        }
      })
    },
    deleteItem (val) {
      this.$confirm('确认删除该条数据？', '删除确认', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$http.post(`/${this.$const.PREFIX.MAINDATA}/mvendors/delete`, {id: val.id}).then((res) => {
          if (res.result) {
            this.$message.success('操作成功')
            this.searchInfo.current = 1
            this.getProviderList()
          } else {
            this.$message.error(res.msg)
          }
        })
      })
    },
    sizeChangeHandle (val) {
      this.searchInfo.size = val
      this.getProviderList()
    },
    currentChangeHandle (val) {
      this.searchInfo.current = val
      this.getProviderList()
    }
  }
}
</script>
<style lang="scss" scoped>
.agent-wrapper{
  &_search{
    background: white;
    padding: 20px 0 0 20px;
  }
}
.mtb15{
  margin: 15px 0;
}
</style>